<template>
	<div class="pd15">
		<view class="plt20 flex alcenter center">
			<image src="@/static/logo_icon.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
			<view class="ml10">聚乾云进销存ERP</view>
		</view>
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="180rpx">
			<u-form-item label="账号" prop="username" borderBottom ref="username">
				<u--input v-model="form.username" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom ref="password">
				<u--input v-model="form.password" border="none" type="password"></u--input>
			</u-form-item>
			<u-form-item label="验证码" prop="captcha" borderBottom ref="captcha">
				<view class="flex alcenter">
					<u--input v-model="form.captcha" border="none" placeholder="验证码">
					</u--input>
					<image :src="randCodeImage" mode="" @click="handleChangeCheckCode" class="codeImage"></image>
				</view>

			</u-form-item>
			<u-button class="btn" :customStyle="{fontWeight:700,marginTop:'40rpx'}" @click="submitForm()"
				hoverClass="none" :loading="btnLoading" shape="circle" type="primary">登
				录</u-button>
		</u--form>
		<view class="mt40 text-center">
			<button class='bottom' type='' withCredentials="true" lang="zh_CN" @click="getALICode">
				<image src="@/static/login_wechat.png" mode="" style="width: 120rpx;height: 120rpx;"></image>
				<view>微信登录</view>
			</button>
		</view>
	</div>
</template>

<script>
	import {
		toast,
		useRouter
	} from '@/utils/utils.js'
	import config from '@/admin.config.js';
	import bus from '@/common/bus';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// import { login } from '@/api/demo/demo.js'
	export default {
		data() {
			return {
				form: {
					username: 'ERP-01',
					password: 'ERP12345678..',
					captcha: "",
					checkKey: 1629428467008
				},
				loading: false,
				rules: {
					username: [{
						required: true,
						message: '账号不可以为空',
						trigger: ['blur', 'keyup']
					}],
					password: [{
						required: true,
						message: '密码不可以为空',
						trigger: 'change'
					}],
					// captcha: [{
					// 	required: true,
					// 	message: '验证码不可以为空',
					// 	trigger: ['blur', 'keyup']
					// }],
				},
				business_data: {},
				randCodeImage: ''
			};
		},
		methods: {
			...mapMutations(['login', 'logout', 'token']),
			enter() {
				if (this.form.username) {
					this.$refs.password.$el.querySelector('input').focus();
				}
			},
			getALICode() {
				let that = this;
				//#ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: function(res) {
						uni.login({
							success: function(e) {
								console.log(e)
								that.$apis.wxLogin({
									code:e.code,
									session_key:'',
									openid:''
								}).then(res => {
									console.log(res)
									
								})
							}
						})
					}
				})
				//#endif
			},
			handleChangeCheckCode() {
				this.$apis.getInputCode({
					_t: this.form.checkKey
				}).then(res => {
					console.log(res)
					this.randCodeImage = res.result
				})
			},
			submitForm(formName) {
				this.$refs.uForm.validate().then(res => {
					this.$apis.login(this.form).then(res => {
						this.loading = false;
						console.log(res)
						if (res.code == 412) {
							this.$u.toast(res.message)
							this.handleChangeCheckCode()
						}
						if (res.code == 200) {
							// let state = {
							// 	islogin: true,
							// 	member: res.result.userInfo,
							// 	token: res.result.token,
							// 	token_expired: ''
							// }
							this.login(res)
							// uni.setStorage({
							// 	key: 'useadmin_last_username',
							// 	data: data.username
							// });
							// uni.setStorage({
							// 	key: 'useadmin_user',
							// 	data: res.result.userInfo
							// })
							// uni.setStorage({
							// 	key: 'uni_id_token',
							// 	data: res.result.token
							// });

							uni.switchTab({
								url: config.index.url
							});
							this.$u.toast('登录成功')
							// useRouter('/pages/home',{} ,'switchTab')
							bus.$emit('loginIn');
							return;
						}
					})
				}).catch(errors => {})

			}
		},
		mounted() {
			this.handleChangeCheckCode()
			if (uni.getStorageSync('uni_id_token')) {
				uni.reLaunch({
					url: '/pages/tabbar/home'
				})
			}
		}
	};
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		/* background: url('/erp_admin/static/img/login_bg.png'); */
	}

	.login {
		width: 880px;
		height: 560px;
		background: #fff;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.16);
		border-radius: 20px;
	}

	.title {
		font-size: 22px;
		font-weight: 800;
		margin-bottom: 100px;
	}

	.login_form .el-input__inner {
		border: none;
		border-bottom: 1px solid #d9d9d9;
		border-radius: 0;
		padding-left: 6px;
		font-size: 14px;
		width: 260px;
		color: #ff6a6c;
	}


	.login_btn {
		width: 260px;
		height: 40px;
		background-color: #ff6a6c;
		border-radius: 4px;
		font-size: 18px;
		font-weight: 800;
		color: #fff;
	}

	.codeImage {
		width: 100px;
		height: 35px;

	}

	.bottom {
		line-height: 48rpx;
		background: none;
		margin-bottom: 20rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>